<!-- 粒子物理场（鼠标互动） -->
<div id="particleContainer"></div>

<style>
  body {
    background: #1a1a1a;
    margin: 0;
    overflow: hidden;
  }
  .particle {
    width: 6px;
    height: 6px;
    background: #4CAF50;
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
  }
</style>

<script>
  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.vx = Math.random()*4 - 2;
      this.vy = Math.random()*4 - 2;
      this.element = document.createElement('div');
      this.element.className = 'particle';
      document.body.appendChild(this.element);
    }
    
    update() {
      this.x += this.vx;
      this.y += this.vy;
      this.element.style.transform = `translate(${this.x}px, ${this.y}px)`;
    }
  }

  const particles = [];
  for (let i = 0; i < 150; i++) {
    particles.push(new Particle(
      window.innerWidth/2,
      window.innerHeight/2
    ));
  }

  document.addEventListener('mousemove', (e) => {
    particles.forEach(p => {
      const dx = e.clientX - p.x;
      const dy = e.clientY - p.y;
      p.vx += dx * 0.0005;
      p.vy += dy * 0.0005;
    });
  });

  function animate() {
    particles.forEach(p => p.update());
    requestAnimationFrame(animate);
  }
  animate();
</script>
